<template>
  <div style="width: 100%;height:90%;float: right;" >
    <table style="text-align: left">
      <tr>
        <td> 订单编号:  <el-input v-model="forms.orderId" placeholder="请输入内容"  style="width: 270px"></el-input>
        </td>
        <td>订单状态:
          <el-select v-model="forms.status" placeholder="请选择">
            <el-option v-for="item in ddlist" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </td>

        <td>
          付费状态:
          <el-select v-model="forms.paymentStatus" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </td>



      </tr>

      <tr>
        <td>  发件人姓名:  <el-input v-model="forms.senderName" placeholder="请输入内容"  style="width: 270px"></el-input></td>
        <td>  发件人电话:  <el-input v-model="forms.senderPhone" placeholder="请输入内容"  style="width: 270px"></el-input></td>
        <td>
          <span class="demonstration">发件人地址</span>
          <el-cascader v-model="forms.senderAddress" :options="optionss"></el-cascader>
        </td>
      </tr>

      <tr>
        <td>  收件人姓名:  <el-input v-model="forms.receiverName" placeholder="请输入内容"  style="width: 270px"></el-input></td>
        <td>  收件人电话:  <el-input v-model="forms.receiverPhone" placeholder="请输入内容"  style="width: 270px"></el-input></td>
        <td>
          <span class="demonstration">收件人地址</span>
          <el-cascader v-model="forms.receiverAddress" :options="optionss"></el-cascader>
        </td>
      </tr>
    </table>
    <el-button type="primary" plain  >搜索</el-button>
    <hr>






    <el-table ref="singleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  border style="width: 100%;" >


      <el-table-column
        type="index"
        width="50"
      label="序号">
      </el-table-column>

      <el-table-column   prop="orderId" label="订单编号"  width="120" >
      </el-table-column>

      <el-table-column  prop="id"  label="运单编号" width="120">
      </el-table-column>

      <el-table-column  prop="createTime" label="下单时间" width="120">
      </el-table-column>

      <el-table-column prop="status" label="订单状态" width="80">
      </el-table-column>

      <el-table-column prop="senderName" label="发件人姓名" width="100">
      </el-table-column>

      <el-table-column prop="senderPhone" label="发件人电话" width="100">
      </el-table-column>

      <el-table-column prop="senderAddress" label="发件人地址" width="100">
      </el-table-column>

      <el-table-column prop="receiverName" label="收件人姓名" width="100">
      </el-table-column>

      <el-table-column prop="receiverPhone" label="收件人电话" width="100">
      </el-table-column>
      <el-table-column prop="receiverAddress" label="收件人地址" width="100">
      </el-table-column>
<!--      <el-table-column prop="pickupType" label="取件类型" width="60">
      </el-table-column>-->

      <el-table-column label="取件类型" width="90">
        <template slot-scope="scope">
            {{scope.row.pickupType=='1'?'网点自寄':'上面取件'}}
        </template>
      </el-table-column>
<!--      <el-table-column prop="paymentMethod" label="付费类型" width="60">
      </el-table-column>-->
      <el-table-column label="付款方式" width="60">
        <template slot-scope="scope">
          {{scope.row.paymentMethod=='1'?'预结':'到付'}}
        </template>
      </el-table-column>
<!--      <el-table-column prop="paymentStatus" label="付费状态" width="60">
      </el-table-column>-->

      <el-table-column label="付费状态" widht="200">
        <template slot-scope="scope">
          {{scope.row.paymentStatus=='1'?'未付费':'已经付费'}}
        </template>
      </el-table-column>


      <el-table-column
        label="操作"
        width="126">
        <template  slot-scope="scope">
          <el-button @click="cx(scope.row)"  type="text" size="small">查看</el-button>
        </template>
      </el-table-column>


    </el-table>
    <!--分页-->
    <el-pagination
     @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>





    <el-dialog
      style="background-color: transparent" title="详情" :visible.sync="centerDialogVisible" width="70%" center>



      <el-collapse v-model="activeNames" @change="handleChange">
         <div style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width: 800px;height: 90px;background-color: whitesmoke">
           <table style="width: 800px ;height:80px;text-align: left">
             <tr>
               <td>
                 订单编号: {{this.forms.orderId}}
               </td>
               <td>
                 运单编号: {{this.forms.orderId}}  
               </td>
             </tr>
             <tr>
               <td>
                 下单时间: {{this.forms.createTime}}
               </td>
               <td>
                 订单状态:   {{this.forms.status}}
               </td>
               <td>
                 预计到达时间: {{this.forms.estimatedArrivalTime}}
               </td>
             </tr>
           </table>
         </div>
        <el-collapse-item title="基本信息" name="1">
          <div style="background-color: gainsboro">
          <table style="width: 800px ;height:40px;text-align: left;">
            <tr>
              <td>
                发货方
              </td>
            </tr>
            <tr>
              <td>
               发货方姓名: {{this.forms.senderName}}
              </td>
              <td>
               发货方地址: {{this.forms.senderAddressId}}
              </td>
              <td>
                发货方电话: {{this.forms.senderPhone}}
              </td>
              <td>
                详细地址: {{this.forms.senderAddress}}
              </td>
            </tr>
          </table>
          <hr>
          <table style="width: 800px ;height:40px;text-align: left">
            <tr>
              <td>
                收货方
              </td>
            </tr>
            <tr>
              <td>
                收货方姓名: {{this.forms.receiverName}}
              </td>
              <td>
                收货方地址: {{this.forms.receiverAddressId}}
              </td>
              <td>
                发货方电话: {{this.forms.receiverPhone}}
              </td>
              <td>
                详细地址: {{this.forms.receiverAddress}}
              </td>
            </tr>
          </table>
          </div>

        </el-collapse-item>
        <el-collapse-item title="费用信息" name="2">
   <div style="background-color: gainsboro; ">
     <table style="width: 800px ;height:40px;text-align: left">
       <tr>
         <td>
           运费: {{this.forms.amount}}
         </td>
         <td>
           支付方式: {{this.forms.paymentMethod=="1"?"预结":"到付"}}
         </td>
         <td>
           付款状态: {{this.forms.paymentMethod=="1"?"未付":"以付"}}
         </td>
       </tr>
     </table>
   </div>

        </el-collapse-item>
        <el-collapse-item title="货品信息" name="3">

          <el-table ref="singleTable" :data="tableData2"  border style="width: 100%;">


            <el-table-column
              type="index"
              width="50"
              label="序号">
            </el-table-column>

            <el-table-column   prop="name" label="货品名称"  width="120">
            </el-table-column>

            <el-table-column  prop="quantity"  label="货品数量" width="120">
            </el-table-column>

            <el-table-column  prop="goodsTypeId" label="货品类型" width="120">
            </el-table-column>

            <el-table-column prop="weight" label="重量(kg)" width="80">
            </el-table-column>

            <el-table-column prop="volume" label="体积(方)" width="100">
            </el-table-column>

            <el-table-column prop="cargoBarcode" label="条型编码" width="140">
            </el-table-column>

            <el-table-column prop="remark" label="备注" width="140">
            </el-table-column>


          </el-table>

        </el-collapse-item>
        <el-collapse-item title="取件信息" name="4">

          <div style="background-color: gainsboro; ">
            <table style="width: 800px ;height:40px;text-align: left">
              <tr>
                <td>所在网点:</td>
                <td>取件类型:</td>
                <td>作业状态:</td>
                <td>取件快递员:</td>
             </tr>
              <tr>
                <td>快递员电话:</td>
                <td>取件类型:</td>
                <td>作业状态:</td>
              </tr>
            </table>
          </div>


        </el-collapse-item>
      </el-collapse>




      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
     </span>
    </el-dialog>

  </div>
</template>
<script>

import orgApi from "@/js/ddlb";
import { regionDataPlus } from 'element-china-area-data'
export default {
  data() {
    return {
      activeNames: ['1'],
      //详情弹出框
      centerDialogVisible : false,
      //表单
      forms: {orderId: "", orderType: 0, pickupType: 0, createTime: "", memberId: "", receiverProvinceId: "", receiverCityId: "", receiverCountyId: "", receiverAddress: "", receiverAddressId: "", receiverName: "", receiverPhone: "", senderProvinceId: "", senderCityId: "", senderCountyId: "", senderAddress: "", senderAddressId: "", senderName: "", senderPhone: "", currentAgencyId: "", paymentMethod: 0, paymentStatus: 1, amount: 0.0, estimatedArrivalTime: "", distance: 0.0, status: "23002", page: 0, pageSize: 5},
      //初始页x
      currentPage:1,
      // 每页的数据
      pagesize:4,
      //订单表的全部数据
      tableData:[],
      //付款状态下拉框要的东西
      options: [{value: 1, label: "未付款"}, {value: 2, label: "已付款"}],
      //订单下拉框要的东西
      ddlist: [{value: 0, label: "未完成"}, {value: 1, label: "已完成"}],
      optionss: regionDataPlus,
      form2:{cargoBarcode: "",cargoValue: "",goodsTypeId: "",id: "",name: "",orderId: "",quantity: "",remark: "",totalVolume: "",totalWeight: "",tranOrderId: "",unit: "",volume: "",weight: "",  },
      tableData2:[],
 }
  },

  methods: {
  async  cx(arr){
  this.forms=arr;
       var a=arr.orderId
      orgApi.queryOrderId({a}).then(response => {
        const res = response.data
       this.tableData2=res
         console.log(this.form2)
      })

      this.centerDialogVisible=true;
    },

    handleChange(val) { console.log(val); },
    handleSizeChange: function (size) {
      this.pagesize = size;//  console.log(this.pagesize)  //每页下拉显示数据
    },

 //  console.log(this.currentPage)   //点击第几页
    handleCurrentChange: function(currentPage){ this.currentPage = currentPage;  },
 //显示方法
    async show(){    
      orgApi.page({...this.forms}).then(response => {
        const res = response.data
        console.log(res);
        this.tableData=res
      })

    }
  } ,
  created(){
   this.show()
  }
};
</script>
